import { useEffect, useState } from 'react';
import { useStore } from '@/store';
import { useLocation } from 'umi';
import { EditOutlined } from '@ant-design/icons';
import { Modal, Input, message } from 'antd';
import { nanoid } from 'nanoid';

import SlideTop from './components/SlideTop';
import SlideContent from './components/SlideContent';
import SlideList from './components/SlideList';

import styles from './index.less';

const SlideDetail = () => {
  const {
    sildeFatherId,
    slideFatnerList,
    slideList,
    currentSlideIndex,
    slideTitle,
    updateSlideTitle,
    updateSlide,
    setCurrentPresentation,
    updateAnyData,
  } = useStore();
  const [modalVisible, setModalVisible] = useState(false);
  const [inputValue, setInputValue] = useState('');

  console.log('详情页==>', slideList, currentSlideIndex);
  console.log('详情页==>', sildeFatherId, slideFatnerList);
  const { query } = useLocation() as any;
  console.log('query', query);

  useEffect(() => {
    if (query && query.title) {
      updateSlideTitle(query.title);
    }
    //  有id说明是编辑，需要找到一个index的item然后更新
    if (query && query.id) {
      const itemFlag = slideFatnerList.find((item: any) => item.id === query.id);
      if (itemFlag) {
        updateSlideTitle(itemFlag?.slideTitle);
        setCurrentPresentation(1);
        updateAnyData({
          sildeFatherId: query.id,
        });
        updateSlide(itemFlag.slideList);
      }
    } else {
      // 如没有id，说明是新建，
      // 1、需要初始化我们slideList
      // 2、需要更新当前索引为0
      setCurrentPresentation(1);
      updateSlide([
        {
          sortId: 1,
          id: nanoid(),
          elements: [],
        },
      ]);
    }
  }, []);

  const handleCancel = () => {
    setModalVisible(false);
    setInputValue('');
  };

  const handleOK = () => {
    if (!inputValue) {
      message.error('请输入幻灯片标题');
      return;
    }
    setModalVisible(false);
    updateSlideTitle(inputValue);
    handleCancel();
  };

  return (
    <div className={styles['slide-detail']}>
      <div className={styles['slide-left']}>
        <div
          className={styles['title']}
          onClick={() => {
            setInputValue(slideTitle);
            setModalVisible(true);
          }}
        >
          <EditOutlined
            onClick={() => {}}
            style={{
              fontSize: 14,
              marginLeft: 8,
              cursor: 'pointer',
              position: 'absolute',
              right: 8,
              top: 24,
            }}
          />
          {slideTitle}
        </div>
        {/* 根据幻灯片--自动scar--缩放大小 */}
        <div className={styles['slide-list']}>
          <SlideList />
        </div>
      </div>
      <div className={styles['slide-right']}>
        <SlideTop />
        <SlideContent />
      </div>

      <Modal
        width={400}
        title="设置幻灯片标题"
        open={modalVisible}
        onCancel={handleCancel}
        onOk={handleOK}
        okText="修改"
        cancelText="取消"
      >
        <Input value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
      </Modal>
    </div>
  );
};

export default SlideDetail;
